<template>
    <div class="app-container">
      <!-- 查询 -->
      <el-row>
        <el-col>
            <el-input
            v-model="query.search_value"
            class="ya-search-value mb-2 mr-6"
            placeholder="请输入公司名称"
            clearable
            />
            <el-select class="ya-search-value mb-2 mr-6" v-model="query.pay_type" placeholder="请选择支付类型" clearable>
                <el-option key="1" :value="1" label="微信支付" />
                <el-option key="2" :value="2" label="支付宝支付" />
                <el-option key="3" :value="3" label="聚合支付" />
            </el-select>
            <el-date-picker
                v-model="query.date_value"
                type="datetimerange"
                class="ya-date-value mb-2 mr-6"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                popper-class="datetimerange-style"
                :shortcuts="dateShortcuts"
                value-format="YYYY-MM-DD HH:mm:ss"
                @change="search()"
                :default-time="[new Date(2024, 1, 1, 0, 0, 0), new Date(2024, 1, 1, 23, 59, 59)]"
            />
            <el-button class="mb-2 mr-2" style="margin-left:0" type="primary" @click="search()">查询</el-button>
            <el-button class="mb-2 mr-2" style="margin-left:0" title="重置" @click="refresh()">重置
                <!-- <svg-icon icon-class="refresh" /> -->
            </el-button>
            <el-button class="mb-2 mr-2" style="margin-left:0" type="primary" @click="visible = true">添加</el-button>
        </el-col>
      </el-row>
  
      <!-- 列表 -->
      <el-table
        ref="table"
        v-loading="loading"
        :data="data"
        :height="height"
        stripe
        highlight-current-row
      >
      <el-table-column prop="mch_id" label="商户id" show-overflow-tooltip />
      <el-table-column prop="company" label="公司名称" show-overflow-tooltip />
      <el-table-column prop="name" label="商户简称" show-overflow-tooltip />
      <el-table-column prop="app_id" label="应用id" show-overflow-tooltip />
        <el-table-column prop="pay_type" label="支付类型" show-overflow-tooltip>
            <template #default="scope">
               {{ payType[scope.row.pay_type-1] }}
            </template>
        </el-table-column>
        <el-table-column prop="key" label="支付密钥" show-overflow-tooltip />
        <el-table-column prop="notify_url" label="支付回调地址" show-overflow-tooltip />
        <el-table-column prop="key_path" label="密钥文件" show-overflow-tooltip />
        <el-table-column prop="cert_path" label="证书文件" show-overflow-tooltip />
        <el-table-column prop="alipay_private_key" label="支付宝应用私钥" show-overflow-tooltip />
        <el-table-column prop="alipay_public_key" label="支付宝公钥" show-overflow-tooltip />
        <el-table-column prop="is_disable" label="禁用" width="100" show-overflow-tooltip>
            <template #default="scope">
                <el-switch
                v-model="scope.row.is_disable"
                :active-value="1"
                :inactive-value="0"
                @change="disable(scope.row)"
                />
            </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" show-overflow-tooltip />
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-link type="primary" class="mr-1" :underline="false" @click="info(scope.row)">
              修改
            </el-link>
            <el-link type="primary" class="mr-1" :underline="false" @click="bingTencent(scope.row)">
              绑定公众号
            </el-link>
            <el-popconfirm
                title="是否删除该数据?"
                cancel-button-text="否"
                confirm-button-text="是"
                confirm-button-type="primary"
                @confirm="dele(scope.row)"
            >
                <template #reference>
                <el-link type="primary" class="mr-1" :underline="false"> 删除 </el-link>
                </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 绑定商户号 -->
      <el-dialog
        title="绑定公众号"
        v-model="dialogVisible"
        :close-on-click-modal="false"
        width="600"
        :before-close="handleClose"
      >
        <div>
          <el-transfer
            filterable
            filter-placeholder="请输入城市拼音"
            :filter-method="filterMethod"
            :titles="['商户列表', '已选']"
            v-model="value"
            :data="transferData"
          />
        </div>
        <template #footer>
          <el-button :loading="loading" @click="dialogVisible = false">取消</el-button>
          <el-button :loading="loading" type="primary" @click="bindSubmit">确定</el-button>
        </template>
      </el-dialog>
      <!-- 分页 -->
      <pagination
        v-show="count > 0"
        v-model:total="count"
        v-model:page="query.page"
        v-model:limit="query.limit"
        @pagination="list"
      />
  
      <el-dialog
        v-model="visible"
        title="Tips"
        width="30%"
        :before-close="
          (done) => {
            ElMessageBox.confirm('是否关闭?')
              .then(() => {
                done()
              })
              .catch(() => {
                // catch error
              })
          }
        "
      >
        <el-form label-width="160px" ref="formRef" :model="model" :rules="rules">
            <el-form-item label="支付类型(支付渠道)" prop="pay_type">
                <el-select v-model="model.pay_type" placeholder="请选择支付类型" clearable @change="getPayType">
                    <el-option key="1" :value="1" label="微信支付" />
                    <el-option key="2" :value="2" label="支付宝支付" />
                    <el-option key="3" :value="3" label="聚合支付" />
                </el-select>
            </el-form-item>
            <el-form-item label="app_id" prop="app_id">
                <el-input v-model="model.app_id" placeholder="请输入app_id" clearable />
            </el-form-item>
            <el-form-item label="公司名称" prop="company">
                <el-input v-model="model.company" placeholder="请输入公司名称" clearable />
            </el-form-item>
            <el-form-item label="商户简称" prop="name">
                <el-input v-model="model.name" placeholder="请输入商户简称" clearable />
            </el-form-item>
            <el-form-item label="商户id" prop="mch_id">
                <el-input v-model="model.mch_id" placeholder="请输入商户id" clearable />
            </el-form-item>
            <el-form-item label="支付密钥" prop="key">
                <el-input v-model="model.key" placeholder="请输入支付密钥" clearable />
            </el-form-item>
            <el-form-item label="支付回调地址" prop="notify_url">
                <el-input v-model="model.notify_url" placeholder="请输入支付回调地址" clearable />
            </el-form-item>
            <el-form-item label="证书文件" prop="cert_path">
                <el-input v-model="model.cert_path" placeholder="请输入证书文件" clearable />
            </el-form-item>
            <el-form-item label="密钥文件" prop="key_path">
                <el-input v-model="model.key_path" placeholder="请输入密钥文件" clearable />
            </el-form-item>
            <el-form-item label="消息AES密钥" prop="aesKey">
                <el-input v-model="model.aesKey" placeholder="请输入消息AES密钥" clearable />
            </el-form-item>
            <el-form-item label="支付宝应用私钥" prop="alipay_private_key">
                <el-input v-model="model.alipay_private_key" placeholder="请输入支付宝应用私钥" clearable />
            </el-form-item>
            <el-form-item label="支付宝公钥" prop="alipay_public_key">
                <el-input v-model="model.alipay_public_key" placeholder="请输入支付宝公钥" clearable />
            </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="submit">提交</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import screenHeight from '@/utils/screen-height'
  import { getPageLimit } from '@/utils/settings'
  import {shortcuts} from '@/utils/index'
  import { list,disable,dele,add,info,edit } from '@/api/account/merchant'
  import { list as wechatList,tencentList } from '@/api/account/wechat'
  export default {
    name: 'ConfigPayIndex',
    components: {},
  
    data() {
      return {
        dialogVisible: false,
        dateShortcuts: shortcuts,
        data: [],//table列表数据
        loading: false,//加载
        height: 680,//table高度
        count: 0,//列表总计
        // 支付类型
        payType: [
            "微信",
            "支付宝",
            "聚合支付"
        ],
        // 表单验证规则
        rules: {
            pay_type: [{ required: true, message: '', trigger: 'change' }]
        },
        dialogVisible: false, //绑定公众号
        transferData: this.wechatList(), //绑定公众号列表
        value: [], //绑定公众号的值
        bindItem: {}, //点击的对象数据
        filterMethod(query, item) {
          return item.label.indexOf(query) > -1
        },
        query: {//入参
            page: 1,
            limit: getPageLimit(),
            search_field: 'company',
            search_value: '',
            pay_type: null,
            search_exp: 'like',
            date_field: 'create_time',
            // `${dayjs().format('YYYY-MM-DD')} 00:00:00`, `${dayjs().format('YYYY-MM-DD')} 23:59:59`
            date_value: []//默认当天
        },
        visible: false,//添加编辑弹窗
        model: {}//表单数据绑定
      }
    },
    created() {
      this.height = screenHeight()
      this.list()
    },
    methods: {
      // 绑定弹窗
      bingTencent (item) {
        this.dialogVisible = true
        this.bindItem = item
        this.value = item.wechat_list
      },
      // 绑定商户提交
      bindSubmit() {
        let ids = []
        this.value.forEach((element) => {
          ids.push(element)
        })
        console.log(this.bindItem, 'bindItem')
        tencentList({
          pay_id: this.bindItem.pay_id,
          ids: ids
        }).then((res) => {
          if (res.code == 200) {
            this.dialogVisible = false
            ElMessage.success(res.msg)
            this.list()
          }
        })
      },
      // 公众号列表
      wechatList () {
        const data = []
        wechatList({
          //接口入参
          page: 1,
          limit: 100000,
          search_field: 'is_disable',
          search_value: '0',
          search_exp: 'like',
        }).then(res => {
          console.log(res, 'res<<<111<')
          if (res.code == 200) {
            res.data.list.forEach(element => {
              data.push({
                label: element.title,
                key: element.wechat_id
              })
            });
          }
        })
        return data
      },
      // 列表
      list() {
        this.loading = true
        list(this.query)
          .then((res) => {
            this.data = res.data.list
            this.count = res.data.count
            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
      },
       // 提交保存
       submit () {
            if (this.model.pay_id) {
                this.edit()
            } else {
                this.add()
            }
        },
        // 搜索
        search () {
            this.query.page = 1
            this.list()
        },
        // 禁用
        disable(e) {
            disable({
                ids: [e.pay_id],
                is_disable: e.is_disable
            })
            .then((res) => {
                ElMessage.success(res.msg)
                this.list()
            })
            .catch(() => {
            })
        },
        // 删除
        dele(e) {
            dele({
                ids: e.pay_id
            }).then((res) => {
                ElMessage.success(res.msg)
                this.list()
            }).catch(() => {})
        },
        // 添加
        add () {
            // 添加
            add(this.model).then(res => {
                if (res.code == 200) {
                    ElMessage.success('添加成功')
                    this.list()
                    this.visible = false
                    this.model = {}
                }
            })
        },
        // 编辑
        edit() {
            // 添加
            edit(this.model).then(res => {
                if (res.code == 200) {
                    ElMessage.success('编辑成功')
                    this.list()
                    this.visible = false
                    this.model = {}
                }
            })
        },
        // 编辑获取info
        info(item) {
            info({pay_id :item.pay_id}).then(res => {
                if (res.code == 200) {
                    this.model = res.data
                    this.visible = true
                }
            })
        },
         // 刷新
        refresh() {
            this.query = this.$options.data().query
            this.list()
        },
        // 根据选择支付类型验证规则
        getPayType () {
            if (this.model.pay_type==2) {
                this.rules = {
                    pay_type: [{ required: true, message: '', trigger: 'change' }],
                    company: [{ required: true, message: '', trigger: 'blur' }],
                    name: [{ required: true, message: '', trigger: 'blur' }],
                    app_id: [{ required: true, message: '', trigger: 'blur' }],
                    notify_url: [{ required: true, message: '', trigger: 'blur' }],
                    alipay_private_key: [{ required: true, message: '', trigger: 'blur' }],
                    alipay_public_key: [{ required: true, message: '', trigger: 'blur' }]
                }
            } else if (this.model.pay_type==1) {
                this.rules = {
                    pay_type: [{ required: true, message: '', trigger: 'change' }],
                    company: [{ required: true, message: '', trigger: 'blur' }],
                    name: [{ required: true, message: '', trigger: 'blur' }],
                    mch_id: [{ required: true, message: '', trigger: 'blur' }],
                    // app_id: [{ required: true, message: '', trigger: 'blur' }],
                    key: [{ required: true, message: '', trigger: 'blur' }],
                    notify_url: [{ required: true, message: '', trigger: 'blur' }],
                    cert_path: [{ required: true, message: '', trigger: 'blur' }],
                    key_path: [{ required: true, message: '', trigger: 'blur' }],
                }
            } else {
                this.rules = {
                    pay_type: [{ required: true, message: '', trigger: 'change' }],
                    company: [{ required: true, message: '', trigger: 'blur' }],
                    name: [{ required: true, message: '', trigger: 'blur' }],
                }
            }
        }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  ::v-deep .el-radio.el-radio--large {
    height: 32px;
  }
  ::v-deep .el-form-item.is-error .el-input__wrapper{
    box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
  }
  ::v-deep .el-input__wrapper.is-focus {
    box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset !important;
  }
  ::v-deep .el-popper{
    max-width: 50%;
  }
  </style>